<template>
  <div>
    <!-- 头部导航条-->
    <div class="main-nav">
      <div class="main-container navbar navbar-default">
        <div class="container-nav">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <!-- logo -->
            <button
              type="button"
              class="navbar-toggle collapsed"
              data-toggle="collapse"
              data-target="#bs-example-navbar-collapse-1"
              aria-expanded="false"
            >
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <!-- logo -->
            <div class="logo">
              <img src="../assets/image/logo.png" alt="" />
            </div>
          </div>
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div
            class="collapse navbar-collapse"
            id="bs-example-navbar-collapse-1"
          >
            <!-- pc -->
            <ul class="nav navbar-nav">
              <li
                :class="[$route.meta.index == index ? 'main-nav-active' : '']"
                @click="handlePc(index, item)"
                v-for="(item, index) in pcList"
                :key="index"
              >
                {{ $t(item) }}
              </li>
              <!-- 国际化语言 -->
              <li class="changelang">
                <span
                  class="lang"
                  :class="[isclickActive == index ? 'lang-active' : '']"
                  v-for="(item, index) in language"
                  :key="index"
                  @click="changeLan(item.type, index)"
                  >{{ item.name }}</span
                >
              </li>
            </ul>
            <!-- 移动端自定义 -->
            <ul class="nav-pc">
              <!-- 示例项 -->
              <li
                v-for="(item, index) in navList"
                :key="index"
                class="nav-item"
                @click="handleMobile(item)"
              >
                <!-- 图标 -->
                <div class="nav-item-l">
                  <div class="icon">
                    <img
                      :src="
                        item.lefticon
                          ? require(`../assets/image/${item.lefticon}`)
                          : ''
                      "
                      alt=""
                    />
                  </div>
                  <div class="item-text">{{ item.text }}</div>
                </div>

                <div class="right-arrow">
                  <img
                    :src="
                      item.righticon
                        ? require(`../assets/image/${item.righticon}`)
                        : ''
                    "
                    alt=""
                  />
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // pc导航条
      pcList: ["home", "about", "case", "honor", "news", "employ"],

      // 移动导航条列表
      navList: [
        {
          lefticon: "home-icon.png",
          text: "首页",
          righticon: "right-arrow.png",
        },
        {
          lefticon: "about.png",
          text: "关于我们",
          righticon: "right-arrow.png",
        },
        {
          lefticon: "anli.png",
          text: "经典案例",
          righticon: "right-arrow.png",
        },
        {
          lefticon: "honor.png",
          text: "荣誉",
          righticon: "right-arrow.png",
        },
        {
          lefticon: "new.png",
          text: "新闻",
          righticon: "right-arrow.png",
        },
        {
          lefticon: "zhaopin.png",
          text: "招聘",
          righticon: "right-arrow.png",
        },
      ],
      ismainnavActive: "",
      language: [
        { name: "中", type: "zh" },
        { name: "/" },
        { name: "EN", type: "en" },
      ],
      isclickActive: "",
    };
  },
  created() {},
  methods: {
    changeLan(type, index) {
      this.isclickActive = index;
      console.log(type);
      localStorage.lang = type;
      this.$i18n.locale = type;
    },

    // 进入pc路由
    handlePc(index) {
      console.log(index);
      if (index == 0) {
        this.$router.push({
          path: "/home",
        });
      }
      if (index == 1) {
        this.$router.push({
          path: "/about",
        });
      }
      if (index == 2) {
        this.$router.push({
          path: "/cases",
        });
      }
      if (index == 3) {
        this.$router.push({
          path: "/honor",
        });
      }
      if (index == 4) {
        this.$router.push({
          path: "/news",
        });
      }
      if (index == 5) {
        this.$router.push({
          path: "/employ",
        });
      }
    },
    // 进入移动端路由
    handleMobile(item) {
      if (item.text === "首页") {
        this.$router.push({
          path: "/home",
        });
      }
      if (item.text === "关于我们") {
        this.$router.push({
          path: "/about",
        });
      }
      if (item.text === "经典案例") {
        this.$router.push({
          path: "/cases",
        });
      }
      if (item.text === "荣誉") {
        this.$router.push({
          path: "/honor",
        });
      }
      if (item.text === "新闻") {
        this.$router.push({
          path: "/news",
        });
      }
      if (item.text === "招聘") {
        this.$router.push({
          path: "/employ",
        });
      }
    },
  },
  created() {},
  mounted() {},
};
</script>

<style lang="less" scoped>
img {
  display: block;
  width: 100%;
}

.navbar-default .navbar-nav > li > a {
  color: #fff;
}

// 移动端
@media (max-width: 768px) {
  .navbar-header {
    background: #09144c;
  }
  .logo {
    width: 110px;
    margin-left: 15px;
    margin-top: 8px;

    img {
      width: 100%;
    }
  }
  .navbar-default .navbar-collapse,
  .navbar-default .navbar-form {
    border: none;
  }
  .navbar-collapse {
    background: #020410;
  }

  .navbar-nav {
    display: none;
  }
  .navbar {
    margin-bottom: 0 !important;
    border: none;
    border-radius: 0 !important;
  }
  .nav-pc li:nth-last-child(1) {
    border: none;
  }
  .nav-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #fff;
    padding-top: 16px;
    padding-bottom: 16px;
    .icon {
      width: 20px;
    }
    .item-text {
      font-size: 18px;
      color: #fff;
      margin-left: 16px;
    }
    .right-arrow {
      width: 10px;
      // margin-right: 16px;
    }
  }
  .nav-item-l {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

// pc端(大于768)
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
  // 首页主导航
  .main-nav {
    background: #082b9f;

    .main-container {
      margin: 0 auto;
      width: 1200px;
      background: #082b9f;
      padding: 5px 0;
    }

    .navbar-default {
      border: none !important;
      box-shadow: none !important;

      .container-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #082b9f;
        // padding: 10px 0;
      }
      .logo {
      }
      .nav li {
        padding: 16px 0;
        margin: 0 30px;
        color: #fff;
      }
      .main-nav-active {
        border-bottom: 2px solid orange;
      }
      .nav {
        position: relative;
      }
      .nav li {
        cursor: pointer;
      }
      // .nav > li ::after {
      //   content: ""; /*CSS伪类用法*/
      //   position: absolute; /*定位背景横线的位置*/
      //   background: orange; /*宽和高做出来的背景横线*/
      //   width: 18px;
      //   height: 2px;
      //   bottom: 0;
      //   left: calc(50% - 20px);
      // }
      .navbar {
        margin-bottom: 0 !important;
        border: none;
        border-radius: 0 !important;
      }
      .navbar-collapse {
        margin-left: 100px;
      }
      .nav-pc {
        display: none;
      }
      // 中英切换
      .changelang {
        color: #ccc !important;
        .lang {
          padding: 0 5px;
        }
        .lang-active {
          color: #fff;
        }
      }
    }
  }
}
</style>
